<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="修改认证类型"
    width="650px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <vxe-grid v-bind="gridOptions">
      <template #country="{ row }">
        <SelectCountry
          class="w-full"
          v-if="notAdd(row)"
          v-model="row.country"
          valueKey="item"
          placeholder="国家"
          multiple
        />
        <el-button v-if="row.type === 'add'" @click="handleAddRow"> +添加 </el-button>
      </template>
      <template #type="{ row }">
        <el-select
          v-if="notAdd(row)"
          v-model="row.authentication_type"
          @change="changeAuthentication($event, row)"
          placeholder="认证类型"
          filterable
          clearable
        >
          <el-option
            v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #operation="{ row, rowIndex }">
        <el-button type="danger" link v-if="notAdd(row)" @click="handleDelete(rowIndex)">
          删除
        </el-button>
      </template>
    </vxe-grid>

    <template #footer>
      <div class="footer-btn flex items-center justify-between">
        <div>
          <el-radio-group v-model="ids.edit_type" class="ml-4">
            <el-radio :label="1">新增</el-radio>
            <el-radio :label="2">覆盖</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import SelectCountry from "@/components/SelectCountry";
import { batchUpdateAuth } from "../api.js";
const visible = ref(false);
const loading = ref(false);
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);
const ids = ref({
  edit_type: 1,
});
const emit = defineEmits(["refresh"]);

const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value[data.name] = data.ids;
  visible.value = true;
};
const notAdd = (row) => row.type !== "add";
const gridOptions = reactive({
  round: true,
  height: "600",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [
    {
      type: "add",
    },
  ],
  columns: [
    {
      field: "country",
      title: "国家",
      align: "center",
      slots: { default: "country" },
    },
    {
      field: "type",
      title: "认证类型",
      align: "center",
      slots: { default: "type" },
    },
    {
      title: "操作",
      width: 90,
      align: "center",
      slots: { default: "operation" },
    },
  ],
});
const changeAuthentication = (val, row) => {
  const item = options.value["goods.GoodsSpu"]?.[0].authenticationText.find(
    (i) => i.value == val
  );
  row.authentication_name = item?.label;
};
const handleAddRow = () => {
  gridOptions.data.splice(-1, 0, {});
};
const handleDelete = (index) => {
  gridOptions.data.splice(index, 1);
};
const save = async () => {
  loading.value = true;
  try {
    let data = getTableData();
    const res = await batchUpdateAuth(Object.assign({}, ids.value, { params: data }));
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
const getTableData = () => {
  const data = gridOptions.data.filter((item) => item.country);
  return data.map((item) => {
    return {
      country: item.country,
      authentication_type: item.authentication_type,
      authentication_name: item.authentication_name,
    };
  });
};

const close = async (refresh) => {
  ids.value = {
    edit_type: 1,
  };
  gridOptions.data = [
    {
      type: "add",
    },
  ];
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
